<script setup lang="ts">
import {reactive, onMounted, ref, defineAsyncComponent} from 'vue';
import {AccUserList, deleteUserMessageList} from '/@/api/api'
import {useRouter} from 'vue-router';
const messageForm = defineAsyncComponent(() => import('./components/messageForm.vue'));
const router = useRouter()
import {ElMessage} from 'element-plus';
import {formatTime} from "/@/utils";
const messageFormRef:any = ref()
const action = import.meta.env.VITE_API_URL + '/util/file/oss/single'
const data = reactive({
  show: false,
  userId: '',
  tabIndex: 0,
  dataList: [],
  page: {
    total: 10,
    currentPage: 1,
    pageSize: 10,
    // background: false,
    // layout: "total,pager,prev, next",
  },
  //教师列表配置
  option: {
    index: true,
    // searchLabelWidth: 65,
    addBtn: false,
    printBtn: false,
    excelBtn: false,
    // searchSpan: 5,
    searchMenuSpan: 6,
    border: true,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    align: 'center',
    // emptyBtnText: '重置',
    emptyBtnIcon: 'el-icon-close',
    column: [
      {
        label: 'Creation time',
        prop: 'createTime',
        minWidth: 150,
      },
      {
        label: 'Message title',
        prop: 'messageHeadline',
      },
      {
        label: 'Substance',
        prop: 'messageContent',
      },
      {
        label: 'Phone',
        prop: 'userPhone',
        minWidth: 100,
        search: true,
      },
      {
        label: 'Reading status',
        prop: 'readState',
        search: true,
        searchLabelWidth:140,
        searchSpan: 6,
        searchType: 'select',
        dicData: [
          {
            value: 0,
            label: 'Unread'
          },
          {
            value: 1,
            label: 'Read'
          }
        ],
      },
    ]
  },
  form: {
    userPhone:''
  },
})

onMounted(() => {

})
const CourseListPage = (item: object = {}) => {
  let page = {
    ...item,
    pageIndex: data.page.currentPage,
    pageSize: data.page.pageSize,
  }
  AccUserList({...page,...data.form}).then((res: any) => {
    if (res.code === 200) {
      data.dataList = res.data.list
      data.page.total = res.data.total
    }
  })
}
const onLoad = (e: any) => {
  console.log(e)
  data.page.currentPage = e.currentPage
  data.page.pageSize = e.pageSize
  // bannerList()
  CourseListPage()
}
const toViewEditAdd = (val: object) => {
  console.log(messageFormRef)
  messageFormRef.value.show()
}
const deleteListItem = (val: any) => {
  deleteUserMessageList({ids:[val.userMessageId]}).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('删除成功')
      CourseListPage()
    }
  })
}
const searchChange = (params: any, done: any) => {
  console.log(params)
  data.form = {...data.form,...params}
  done()
  CourseListPage({
    ...data.form
  })
}
const resetChange = (item: any) => {
  data.form = {}
  CourseListPage()
}
const tabIndexFun = (index: number) => {
  data.tabIndex = index
}

const refreshChange = (index: number) => {
  CourseListPage()
}
const changeShowFun = () => {
  CourseListPage()
}
const formatPhoneNumber = (phoneNumber:any) => {
  const cleanedInput = phoneNumber.replace(/[^0-9]/g, '');
  if (cleanedInput.length !== 10) {
    return phoneNumber;
  }

  const formattedNumber = `${cleanedInput.slice(0, 3)}-${cleanedInput.slice(3, 6)}-${cleanedInput.slice(6)}`;
  return formattedNumber;
}
</script>

<template>
  <div class="layout-pd">
    <div class="carousel-box">
      <avue-crud v-model:page="data.page" :data="data.dataList" :option="data.option" @on-load="onLoad"
                 @search-reset="resetChange" @refresh-change="refreshChange" @search-change="searchChange">
        <template #userPhone-search="{disabled,size}">
          <el-input
              v-model="data.form.userPhone"
              placeholder="Please enter a phone number"
              :maxlength="12"
              :formatter="(value) => (value ? formatPhoneNumber(value) : '')"
          />
        </template>
        <template #menu-left="{}">
          <el-button size="default" type="primary" @click="toViewEditAdd">Send a message</el-button>
        </template>
        <template #messageContent="{row}">
          <el-tooltip :content="row.messageContent" placement="top">
            <el-text truncated line-clamp="1">
              <div style="width: 100%;max-height: 50px">{{ row.messageContent }}</div>
            </el-text>
          </el-tooltip>
        </template>
        <template #menu="{row}">
          <el-button text type="primary" @click="deleteListItem(row)">Delete</el-button>
        </template>
      </avue-crud>
    </div>
    <messageForm ref="messageFormRef" @changeShow="changeShowFun"/>
  </div>
</template>

<style scoped lang="scss">
.carousel-box {
  width: 100%;
  box-sizing: border-box;
  background: var(--el-color-white);
  padding: 20px;
}

.item-img {
  width: 100%;

  img {
    //width: 80px;
    height: 60px;
  }
}

::v-deep .avue-form__row {
  margin-bottom: 20px;
}
</style>